import { defineComponent } from 'vue';
const AppSliderProps = {
  /**
   * 双向绑定值
   * @type {any}
   * @memberof AppSlider
   */
  value: {
    type: String,
  },

  /**
   * 名称
   * @type {any}
   * @memberof AppSlider
   */
  name: String,

  /**
   * 是否禁用
   * @type {boolean}
   * @memberof AppSlider
   */
  disabled: Boolean,

  /**
   * 只读模式
   * @type {boolean}
   * @memberof AppSlider
   */
  readonly: Boolean,

  /**
   * 最大值
   * @type {string}
   * @memberof AppSlider
   */
  maxValue: Number,

  /**
   * 最小值
   * @type {string}
   * @memberof AppSlider
   */
  minValue: Number,

  /**
   * 步进值
   * @type {string}
   * @memberof AppSlider
   */
  stepValue: Number,

  /**
   * 浮点精度
   * @type {string}
   * @memberof AppSlider
   */
  precision: Number,
};

export const AppSlider = defineComponent({
  name: 'AppSlider',
  props: AppSliderProps,
  methods: {
    /**
     * 滑动条值改变事件
     *
     * @param {*} e
     */
    valueChange(e: any) {
      this.$emit(
        'editorValueChange',
        this.precision ? e.detail.value.toFixed(this.precision) : e.detail.value.toString(),
      );
    },
  },
  render() {
    return (
      <ion-range
        ref='slider'
        class='app-slider'
        style={{ 'pointer-events': this.readonly ? 'none' : 'auto' }}
        value={this.value}
        min={this.minValue}
        max={this.maxValue}
        step={this.stepValue}
        pin
        disabled={this.disabled}
        onIonChange={(e: any) => {
          this.valueChange(e);
        }}
      ></ion-range>
    );
  },
});
